<template>
  <van-nav-bar title="订单详情" left-text="" left-arrow @click-left="goBack" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{detail.status_text}}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 收货地址 -->
      <div class="aui-flex">
        <div class="aui-flex-add">
          <img src="/assets/images/avatar-01.jpg" alt="" />
        </div>
        <div class="aui-flex-box">
          <h3>{{detail.address.consignee}} <em> {{detail.address.mobile}}</em></h3>
          <p>{{detail.address.region_text+detail.address.address}}</p>
        </div>
      </div>

      <!-- 订单商品 -->
      <div class="aui-commodity-bg">
        <div class="item" v-for="item in detail.info" :key="item.id">
          <div class="aui-flex">
            <div class="aui-commodity-img">
              <router-link :to="{ path: '/product/detail', query: { pid: item.proid } }">
                <img :src="item.product.thumbs_text" />
              </router-link>
            </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{item.product.name}}</h4>
              <p>商品单价：￥{{item.price}}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{item.total}}</h5>
              <p class="aui-sml-text">X{{item.pronum}}</p>
            </div>
          </div>

          <div style="text-align: right" v-if="!item.rate && detail.status == '3'">
            <van-button type="success" size="mini" @click="toPage(item)">评价</van-button>
          </div>
        </div>
      </div>

      <!-- 总价 -->
      <div class="aui-cp-edu b-line">
        <div class="aui-flex aui-flex-ed">
          <div class="aui-flex-box">
            订单总价<em style="color: #333">￥{{detail.amount}}</em>
          </div>
        </div>
      </div>

      <div class="divHeight b-line"></div>

      <!-- 订单详细内容 -->
      <div class="aui-flex aui-flex-text-sml b-line orderinfo">
        <div class="aui-flex-box">
          <p>
            <em>订单号:</em>
            {{detail.code}}
          </p>
          <p>
            <em>支付方式:</em>
            {{detail.pay_text}}
          </p>
          <p>
            <em>优惠金额:</em>
            {{detail.coupon_amount}}
          </p>
          <p v-if="detail.expresscode">
            <em>配送物流:</em>
            {{detail.express_text}}
          </p>
          <p v-if="detail.expresscode">
            <em>物流单号:</em>
            {{detail.expresscode}}
          </p>
          <p>
            <em>下单时间:</em>
            {{detail.createtime}}
          </p>
          <p>
            <em>订单描述:</em>
            {{detail.remark}}
          </p>
        </div>
      </div>
    </section>

    <footer class="aui-footer aui-footer-fixed">
      <router-link class="aui-footer-text-info" :to="{path:'/product/customer', query:{pid: detail.id}}">
        <a href="javascript:;" class="aui-payment">在线客服</a>
      </router-link>
      <div class="aui-footer-text-info">
        <a href="javascript:;" class="aui-payment">申请退货</a>
      </div>
    </footer>
  </section>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))
const orderid = ref(proxy.$route.query.orderid ?? 0)
const detail = ref({
    address: {},
    info: []
})

onBeforeMount(() => {
  getOrderInfoData()
})
const getOrderInfoData = async () => {
  let result = await Api.OrderInfo({ busid:LoginUser.id,orderid:orderid.value })
  if (result.code == 1) {
    detail.value = result.data;
    console.log(detail.value);
  }
}

// 评价按钮
const toPage=(val)=>{
  proxy.$router.push({
    path: '/order/rate',
    query: {
        orderpid: val.id,
    }
  })
}

</script>

<style>
@import url('/assets/css/info.css');
.aui-flex-box{
  text-align: left;
}
</style>